<template>
  <div>
    <h2>Axios 模拟请求json-server 数据</h2>
    <h2>word -- {{ word }}</h2>
    <button @click="getList">获取list</button>
    <div>
      <h4 v-for="(l, i) in list" :key="i">{{ l }}</h4>
    </div>
    <div>
      <h2>用户列表</h2>
      <ul>
        <li v-for="(l, i) in user" :key="i">
          名字：{{ l.username }}/ 年龄：{{ l.age }}
          <button @click="deleteOne(l, i)">删除</button>
          <button @click="updateOne(l, i)">修改</button>
        </li>
      </ul>
      <h2>添加用户</h2>
      <p>
        <input type="text" v-model="form.username" placeholder="请输入姓名：" />
      </p>
      <p>
        <input type="text" v-model.number="form.age" placeholder="请输入年龄" />
      </p>
      <p><button @click="addUser">添加</button></p>
    </div>
  </div>
</template>


<script>
import axios from "axios";
// 接口的服务器路径
axios.defaults.baseURL = "http://localhost:3000";
export default {
  data() {
    return {
      word: "Hello  word",
      list: [],
      user: [],
      form: {},
    };
  },
  created() {
    this.getUser();
  },
  methods: {
    getList() {
      //   $.get("http://localhost:3000/list").then((res) => {
      //     this.list = res;
      //   });

      //axios方法
      //   axios({
      //     url: "/list",
      //     method: "GET",
      //   }).then((res) => {
      //     console.log(res);
      //     this.list = res.data
      //   });

      //axios链式操作
      axios.get("/list").then((res) => {
        this.list = res.data;
      });
    },
    getUser() {
      axios.get("/user").then((res) => {
        this.user = res.data;
      });
    },
    deleteOne(l, i) {
      axios({
        url: "/user/" + l.id,
        methods: "delete",
      }).then((res) => {
        this.user.splice(i, 1);
      });
    },
    updateOne(l, i) {
      let value = window.prompt(i, l.username);
      console.log(value);
      if (value != null) {
        // $.ajax({
        //   url: "http://localhost:3000/user/" + l.id,
        //   type: "PATCH",
        //   data: {
        //     username: value,
        //   },
        //   success: (res) => {
        //     l.username = value;
        //     this.user.splice(i, 1, l);
        //   },
        // });
        axios({
            url:"/user/"+l.id,
            method:"PATCH",
            data:{
                username:value
            }
        }).then(res=>{
            l.username = value
            this.user.splice(i,1,l)
        })
      }
    },
    addUser() {
      if (this.form.username) {
        // axios({
        //     url:"/user",
        //     data:{
        //         ...this.form
        //     },
        //     method:"POST"
        // }).then(res=>{
        //     this.form = {}
        //     this.getUser()
        // })
        axios.post("/user", this.form).then((res) => {
          this.form = {};
          this.getUser();
        });
      }
    },
  },
  mounted() {
    // axios  基于promise
    axios({
      url: "/test",
      methods: "GET",
    })
      .then((res) => {
        console.log(res);
        this.word = res.data[1];
      })
      .catch((err) => {
        console.log(err);
      });
  },
};
</script>